<template>
    <div>
        <h2 class="header_title">人员管理<span @click="create(1)" v-if="isShow">创建</span></h2>
        <div class="_main" v-if="!isShow"><no-right/></div>
        <div class="_main" v-if="isShow">
            <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-form-item label="部门">
                    <el-input v-model="form.department" size="small" clearable placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="form.name" size="small" clearable placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="_confirmbtn" size="small" @click="search">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <span class="_exports" @click="exports">导出</span>
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <div class="_cabin">
                <table>
                    <thead>
                        <tr>
                            <th v-for="(v,i) in roleid == 1006 ? sHeadList : headlist" :key='i'>{{v}}</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,i) in datalist" :key='i'>
                            <td v-for="(v,i) in zdList" :key='i'>{{ item[v] }}</td>
                            <td class="detail">
                                <el-button type="text" @click="create(2, item)">编辑</el-button>
                                <el-button type="text" @click="del({ row: item, type: 1 })">删除</el-button>
                            </td>
                        </tr>
                        <tr v-if="!datalist || datalist && datalist.length == 0">
                            <td colspan="7" class="table_list_empty">暂无数据</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <pagination ref="pagination" :page="page" @pagination="search"></pagination>
        </div>
    </div>
</template>

<script>
import { Notification, MessageBox } from 'element-ui'
import axios from 'axios'
import store from '@/store'

export default {
    name: 'organizationAdministration',
    data () {
        return {
            form: {},
            headlist: [ '分类', '名字', '学校', '部门', '负责人', '联系人', '联系方式'],
            sHeadList: ['分类', '名字', '学校', '班级/部门', '班主任/负责人', '家长/联系人', '联系方式'],
            zdList: ['type', 'name', 'schoolname', 'department', 'headmaster', 'parent', 'phone'],
            page: {
                total: 0,
                query: {
                    pagesize: 5,
                    pagecurrent: 1,
                }
            },
            datalist: [],
            currentPage: 1,
            isShow: true,
            text: '',
            typeList: [
                {
                    id: 1,
                    name: '学生'
                },
                {
                    id: 2,
                    name: '职工'
                },
                {
                    id: 3,
                    name: '访客'
                }
            ],
            roleid: 1006
        }
    },
    mounted() {
        this.search()
    },
    methods: {
        create(index, item) {
            if (index == 1) {
                this.$router.push('/creatSchool')
            } else if (index == 2) {
                this.$router.push({
                name: 'creatSchool',
                params: {
                    personid: item.personid
                }
            })
            }
        },
        search() {
            this.$http('personnel/getmanage', { ...this.page.query, ...this.form }).then(({ data, code, message }) => {
                if (code == 201) {
                    this.isShow = false
                    this.text = message
                } else if (code == 200) {
                    this.roleid = data.roleid
                    data.user.records.forEach(item => {
                        const res = this.typeList.find(x => x.id == item.type)
                        item.type = res ? res.name : ''
                    })
                    this.page.total = data.user.total
                    this.datalist = data.user.records
                } else {
                    this.$notify.error(message)
                }
            })
        },
        del({ row, type }) {
            MessageBox.confirm('你确定要删除这个组织吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    customClass: 'custom',
                    closeOnClickModal: false // 禁止点击关闭遮罩
                }).then(() => {
                    this.$http('personnel/delete', { id: row.id }).then(({ code, message }) => {
                        if (code == 200) {
                            this.$notify.success(message)
                            this.search()
                        } else {
                            this.$notify.success(message)
                        }
                    })
                }).catch(() => {})
        },
        exports() {
            location.href = 'http://wcxt.bjyulinkeji.com/personnel/dataexport?userid=' + store.state.user.userid
        }
    }
}
</script>

<style lang="less" scoped>
    /deep/ .el-input__inner{
        background-color: transparent;
        font-size: 13px;
        color: #fff;
    }
    ._cabin {
        margin-bottom: 30px;
    }
    /deep/ .el-form-item{
        margin-bottom: 10px;
    }
</style>
